<template>
  <div class="cenBotBox">
    <!-- <img src="../assets/left1.png" alt="" srcset=""> -->

    <div>
      <ul class="cenBotulCon" style="height:185px;overflow:hidden;">
        <li v-for="item in getOneParkSpaceCountList" :key="item.index">
          <span class="nametxt">{{item.park_name}}</span>
          <span class="used_count">{{item.used_count}}</span>
          <span class="free_count">{{item.free_count}}</span>
          <span class="total_count">总车位：{{item.total_count}}</span>
          <div class="percentline">
            <i :style="{ width: item.free_count_percent*3.9 + 'rem'}"></i>
          </div>

        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import {
  getOneParkSpaceCount
} from '../api/api';
export default {
  name: 'LeftTop',
  data() {
    return {
      msg: '',

      getOneParkSpaceCountList: []
    }
  },
  mounted() {
    this.getOneParkSpaceCount();

    setInterval(() => {
      this.getOneParkSpaceCount();
    }, 3000);

  },
  methods: {
    getOneParkSpaceCount() {
      getOneParkSpaceCount().then(res => {
        this.getOneParkSpaceCountList.unshift(res);
        console.log($(".cenBotulCon"))

        if (this.getOneParkSpaceCountList.length > 8) {
          this.getOneParkSpaceCountList.splice(8, 1);
        }

        $(".cenBotulCon li:first").css({ "height": '0px' })
        $(".cenBotulCon li:first").animate({ height: '+30px' }, "3000")

      })

      for (var i = 0; i < this.getOneParkSpaceCountList.length; i++) {
        this.getOneParkSpaceCountList[i].free_count_percent = (this.getOneParkSpaceCountList[i].free_count / this.getOneParkSpaceCountList[i].total_count)
        // $(".cenBotulCon li:first").css({ "height": '0px' })
        // $(".cenBotulCon li:first").animate({ height: '+30px' }, "3000")
      }


    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cenBotBox {
  position: absolute;
  left: 5.5rem;
  top: 8.32rem;
  width: 7.2rem;
  height: 3.15rem;
  /* background: url(../assets/left11.png) no-repeat left top; */
  color: #ff0;
}

.cenBotBox ul {
  margin: 0;
  padding: 0;
}

.cenBotBox ul li {
  position: relative;
  width: 7.2rem;
  padding: 0;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: left;
  list-style: none;
  font-size: 0.16rem;
  color: #fff;
  margin-bottom: 0.08rem;
  background: url(../assets/conbotlibg.png) no-repeat left top;
  /* border: 1px solid #18b3f0; */
}

.cenBotBox .nametxt {
  padding-left: 0.15rem;
  width: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 0.3rem;
  display: inline-block;
}

.cenBotBox .used_count {
  font-size: 0.14rem;
  position: absolute;
  left: 1.9rem;
  top: -0.05rem;
  color: #e6d44f;
}

.cenBotBox .free_count {
  font-size: 0.14rem;
  position: absolute;
  right: 1.95rem;
  top: -0.05rem;
  color: #55d6e9;
}

.cenBotBox .total_count {
  font-size: 0.16rem;
  position: absolute;
  right: 0.47rem;
  top: 0rem;
  color: #fff;
}

.cenBotBox .percentline {
  width: 3.6rem;
  position: absolute;
  left: 1.8rem;
  top: 0.2rem;
  height: 0.04rem;
  overflow: hidden;
  background: #e6d44f;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

.cenBotBox .percentline i {
  position: absolute;
  right: 0rem;
  top: 0rem;
  height: 0.04rem;
  overflow: hidden;
  background: #55d6e9;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  border-left: 2px solid #0f205c;
}

.cenBotulCon ul li:first-child {
  margin-top: -35px;
}

.cenBotulCon ul li:last-child {
  display: none;
}

.cenBotBox ul li:first-child {
  margin-top: -35px;
}
</style>
